<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page language="java" import="java.util.*"%>
<%@ page language="java" import="java.text.*"%>
<%@ page language="java" import="com.msr.*"%>
<%@ page language="java" import="com.msr.analysis.*"%>
<%@ page language="java" import="com.msr.common.*"%>
<%@ page language="java" import="com.msr.bean.*"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>MSR-干货数据分析</title>
<%

Navi navi = (Navi)request.getAttribute(SysConstant.PARAM);

%>
<style type="text/css" media="screen">
#content {
	width: 960px;
	margin: 5px auto;
}

#left {
	background: #FFF;
	height: 160px;
	width: 320px;
	float: left;
}

#right {
	background: #FFF;
	height: 160px;
	width: 320px;
	float: right;
}

#center {
	background: #FFF;
	height: 160px;
	margin: 0px 320px;
}
</style>

<script type="text/javascript"
	src="<%=request.getContextPath() %>/js/jquery.min.js"></script>

<script type="text/javascript"
	src="<%=request.getContextPath() %>/js/highcharts.js"></script>

<script type="text/javascript"
	src="<%=request.getContextPath() %>/js/modules/exporting.js"></script>

<script type="text/javascript">
	var chart1;
	$(document)
			.ready(
					function() {
						chart1 = new Highcharts.Chart(
								{
									chart : {
										renderTo : 'container1',
										defaultSeriesType : 'column',
										margin : [ 50, 50, 100, 80 ]
									},
									title : {
										text : '铺货'
									},
									xAxis : {
										categories : [
<%
						               String regionPack = "";

						               for(NaviPack pack:navi.getPacklist())
						               {
						            	   regionPack+="'"+pack.getRegion()+"',";	
						               }
						               if(regionPack.length()>0)
						               {
						               	out.print(regionPack.substring(0, regionPack.length()-1));
						               }
						               %>
	],
										labels : {
											rotation : -45,
											align : 'right',
											style : {
												font : 'normal 13px Verdana, sans-serif'
											}
										}
									},
									yAxis : {
										min : 0,
										title : {
											text : '产品铺货率(%)'
										}
									},
									legend : {
										enabled : false
									},
									tooltip : {
										formatter : function() {
											return '<b>'
													+ this.x
													+ '</b><br/>'
													+ '产品铺货率: '
													+ Highcharts.numberFormat(
															this.y, 1) + '%';
										}
									},
									series : [ {
										name : '产品铺货率',
										data : [
<%
							       String dataPack = "";

							       for(NaviPack pack:navi.getPacklist())
							       {
							    	   dataPack+=""+SysComm.double2String((pack.getCl_hz()/pack.getCount())*100)+",";	
							       }
							       	out.print(dataPack.substring(0, dataPack.length()-1));
							       %>
	],
										dataLabels : {
											enabled : true,
											rotation : -90,
											color : '#FFFFFF',
											align : 'right',
											x : -3,
											y : 10,
											formatter : function() {
												return this.y;
											},
											style : {
												font : 'normal 13px Verdana, sans-serif'
											}
										}
									} ]
								});
					});
	

	var chart2;
	$(document)
			.ready(
					function() {
						chart2 = new Highcharts.Chart(
								{
									chart : {
										renderTo : 'container2',
										defaultSeriesType : 'column',
										margin : [ 50, 50, 100, 80 ]
									},
									title : {
										text : '导购'
									},
									xAxis : {
										categories : [
<%
						               String regionGuide = "";

						               for(NaviGuide guide:navi.getGuidelist())
						               {
						            	   regionGuide+="'"+guide.getRegion()+"',";	
						               }
						               if(regionGuide.length()>0)
						               {
						               	out.print(regionGuide.substring(0, regionGuide.length()-1));
						               }
						               %>
	],
										labels : {
											rotation : -45,
											align : 'right',
											style : {
												font : 'normal 13px Verdana, sans-serif'
											}
										}
									},
									yAxis : {
										min : 0,
										title : {
											text : '导购达成率(%)'
										}
									},
									legend : {
										enabled : false
									},
									tooltip : {
										formatter : function() {
											return '<b>'
													+ this.x
													+ '</b><br/>'
													+ '导购达成率: '
													+ Highcharts.numberFormat(
															this.y, 1) + '%';
										}
									},
									series : [ {
										name : '导购达成率',
										data : [
<%
							       String data = "";

							       for(NaviGuide guide:navi.getGuidelist())
							       {
							    	   data+=""+SysComm.double2String((guide.getCl_ik()/guide.getCount())*100)+",";	
							       }
							       	out.print(data.substring(0, data.length()-1));
							       %>
	],
										dataLabels : {
											enabled : true,
											rotation : -90,
											color : '#FFFFFF',
											align : 'right',
											x : -3,
											y : 10,
											formatter : function() {
												return this.y;
											},
											style : {
												font : 'normal 13px Verdana, sans-serif'
											}
										}
									} ]
								});

					});	
	
</script>

</head>
<body>

	<div align="center">

		<div
			style="width: 960px; height: 100px; background-image: url(<%=request.getContextPath()%>/images/title.png)">
		</div>

		<div align="left" style="width: 960px">
			<p>
				<a href="<%=request.getContextPath()%>/HomeServlet">首页</a>&nbsp;&gt;&gt;&nbsp;干货数据分析
			</p>
		</div>
		<div id="content">

			<table width=100% border="0px">
				<tr>
					<td align="center">


						<table width="960px" border="0px">
							<tr>
								<td width="350px" align="center">
									view details
									<div id="container1"
										style="width: 350px; height: 280px; margin: 0 auto"></div>
										view details
									</td>
								<td width="350px" align="center"><div id="container3"
										style="width: 350px; height: 280px; margin: 0 auto"></div></td>
								<td width="240px" align="center" rowspan="2" valign="top">
								<form  action="<%=request.getContextPath() %>/NaviServlet" method="post" name="form1" id="form1">
									<table width="238px" border="0" cellspacing="5">
										<tr>
											<td width="100" align="right">Year&nbsp;&nbsp;</td>
											<td width="136" align="left"><select name="Year" class="select">
													<option value="2011">2011</option>
													<option value="2012">2012</option>
													<option value="2013">2013</option>
													<option value="2014">2014</option>
											</select>
											</td>
										</tr>
										<tr>
											<td align="right">Month&nbsp;&nbsp;</td>
											<td align="left"><select name="Month" class="select">
													<option value="01">Jan.</option>
													<option value="02">Feb.</option>
													<option value="03">Mar.</option>
													<option value="04">Apr.</option>
													<option value="05">May.</option>
													<option value="06">Jun.</option>
													<option value="07">Jul.</option>
													<option value="08">Aug.</option>
													<option value="09">Sept.</option>
													<option value="10">Oct.</option>
													<option value="11">Nov.</option>
													<option value="12">Dec.</option>
											</select>
											</td>
										</tr>
										<tr>
											<td align="right">Region&nbsp;&nbsp;</td>
											<td align="left"><select name="Region" class="select">
													<option value="All">All</option>
													<option value="East">East</option>
													<option value="West">West</option>
													<option value="South">South</option>
													<option value="North">North</option>
											</select></td>
										</tr>
										<tr>
											<td align="right">Area&nbsp;&nbsp;</td>
											<td align="left"><select name="Area" class="select">
													<option value="All">All</option>
													<option value="Shanghai">Shanghai</option>
													<option value="Beijing">Beijing</option>
													<option value="Anhui">Anhui</option>
											</select></td>
										</tr>
										<tr>
											<td align="right">Account&nbsp;&nbsp;</td>
											<td align="left"><select name="account" class="select">
													<option value="沃尔玛">沃尔玛</option>
													<option value="家乐福">家乐福</option>
													<option value="好又多">好又多</option>
											</select></td>
										</tr>
										<tr>
											<td align="right">Channel&nbsp;&nbsp;</td>
											<td align="left"><select name="Channel" class="select">
													<option value="All">All</option>
													<option value="Shanghai">Shanghai</option>
													<option value="Beijing">Beijing</option>
													<option value="Wuhu">Wuhu</option>
											</select></td>
										</tr>
										<tr>
											<td colspan="2" align="center"><input name="submit"
												type="submit" value="查询" /></td>
										</tr>
									</table>
									</form>
								</td>
							</tr>
							<tr>
								<td width="350px" align="center">view details<div id="container2"x
										style="width: 350px; height: 280px; margin: 0 auto"></div>view details</td>
								<td width="350px" align="center"><div id="container4"
										style="width: 350px; height: 280px; margin: 0 auto"></div></td>

							</tr>
						</table>
					</td>
				</tr>
			</table>
		</div>
	</div>

</body>
</html>